<template>
  <section>
    <div class="question-title">{{xcform_base_xctitle.value}}
      <div class="required" v-if="xcform_prop_required.value==true">(*)</div>
      <i class="el el-icon-view" v-if="xcform_prop_hidden.value===false"></i>
    </div>
    <div>
      <el-select v-model="value" multiple filterable remote :remote-method="control_clickFilter">
        <el-option v-for="item in control.options" :key="item" :label="item" :value="item">
        </el-option>
        <div>
          <el-pagination layout="prev, pager, next" background
          :hide-on-single-page="true" :page-count="control.totalpage" :pager-count="3" @current-change="change_page">
          </el-pagination>
        </div>
      </el-select>

    </div>
  </section>

</template>

<script>
  import {
    xcflowGenerateRequestUrl
  } from '@/utils/xcflow';

  export default {
    props: {
      xcform_base_inputfieldcode: {
        type: Object
      },
      xcform_base_xctitle: {
        type: Object
      },
      xcform_base_selecttablefield: {
        type: Object
      },
      xcform_base_property_input_objselectmulti:{},
      xcform_base_defaultvalue: {
        type: Object
      },
      xcform_base_placeholder: {
        type: Object
      },
      xcform_prop_required: {
        type: Object
      },
      xcform_prop_readonly: {
        type: Object
      },
      xcform_prop_hidden: {
        type: Object
      },
      xcform_layout_span: {
        type: Object
      },
    },
    data() {
      return {
        value: null,
        control: {
          pageNumber: 0,
          totalpage: 1,
          filterString: "",
          options: []
        }
      }
    },
    mounted() {
      let that = this;
      that.value = that.xcform_base_defaultvalue.value;
      that.control_clickFilter("");
    },
    destroyed() {

    },
    methods: {
      change_page(pageNumber){
        let that = this;
        that.control.pageNumber = pageNumber;
        that.control_clickFilter(that.control.filterString);
      },
      control_clickFilter(filterString) {
        let that = this;

        that.control.filterString = filterString;

        let tablename = that.xcform_base_selecttablefield.tablename;
        let showfields = that.xcform_base_selecttablefield.showfields.join(",");
        let filterfields = that.xcform_base_selecttablefield.filterfields.join(",");
        if (tablename != "" && showfields != "") {
          let url = xcflowGenerateRequestUrl(this, "queryTabledataList?tablename=" + tablename + "&showfields=" +
            showfields +
            "&filterfields=" + filterfields + "&filtervalue=" + filterString + "&pageNumber=" + that.control.pageNumber);
          let method = 'get';
          that.$axios({
            method,
            url
          }).then(resp => {
            let options = [];
            for (let index in resp.data.data.list) {
              that.control.totalpage = resp.data.data.totalpage;
              let item = resp.data.data.list[index];

              let row = [];
              for (let index2 in that.xcform_base_selecttablefield.showfields) {
                let field = that.xcform_base_selecttablefield.showfields[index2];
                row.push(item[field]);
              }

              options.push(row.join(' '));
            }
            that.control.options = options;
          });
        }
      },
    },
  }
</script>
<style>
  .el{
    padding-left: 10px;
  }
</style>
